<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
    <style>
        .toast-center-center {
            left: 50%;
            top: 40%;
            transform: translate(-50%,-50%);
        }

    </style>
</head>
<body class="img-bg">

<style>
    .all {
        width: 800px;
        box-shadow: -10px 10px 25px rgba(210, 210, 210, 0.9);
        margin: auto;
        margin-top: 5%;
        display: flex;
        border-radius: 35px;
        background-color: #ffffff;
        height: 550px;
        background-image: url("img/backgroud.jpg");
        background-size: cover;
    }
    .log {
        width: 50%;
        margin: auto;
    }
    .reg {
        width: 50%;
        height: 100%;
        margin: auto;
        background-color: #20b2aa;
        border-radius: 35px;
        color: #ffffff;
    }
    .reg_1 {
        text-align: center;
        margin: auto;
        margin-top: 50%;
    }
    .reg_1 h2 {
        font-weight: 700;
    }
    .reg_1 p {
        margin: 15px 0px 25px 0px;
    }
    .sig {
        width: 70px;
        height: 30px;
        border-radius: 12px;
        background-color: #20b2aa;
        border-color: #fff;
        color: #ffffff;
    }
    #tiao {
        padding: 0em 0;
    }
    .reg_1 a {
        color: #ffffff;
    }
    h3 {
        font-size: 3em;
        color: black;
        padding-bottom: 1em;
        margin: 0;
        text-align: center;
        font-family: "Marvel-Regular";
    }
    .input {
        margin: 10px 50px;
        width: 300px;
        height: 70px;
    }

    span {
        color: #999;
        font-size: 0.85em;
        padding-bottom: 0.2em;
        display: block;
        text-transform: uppercase;
        margin-bottom: 4px;
    }
    .input-text {
        border: 1px solid #555;
        outline-color: #fd9f3e;
        width: 90%;
        font-size: 1em;
        padding: 0.5em;
        line-height: inherit;
    }
    .input-text-trycode {
        border: 1px solid #555;
        outline-color: #fd9f3e;
        width: 50%;
        font-size: 1em;
        padding: 0.5em;
        line-height: inherit;
    }
    .register-top-grid {
        color: black;
        padding-bottom: 1em;
        margin: 0;
        font-family: "Marvel-Regular";
        margin: 10px 0;
    }
    .text-center {
        text-align: center;
    }
    .tijiao {
        color: rgb(255, 253, 253);
        width: 80px;
        height: 35px;
        background-color: rgb(241, 52, 10);
        border: none;
    }

    .toast-center-center {
        top: 50%;
        left: 50%;
        margin-top: -30px;
        margin-left: -150px;
    }
</style>
<script src="/js/jQuery.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<div class="all">
    <div class="log">
        <div class="register">
            <form>
                <div class="register-top-grid">
                    <h3>登录</h3>
                    <div class="input">
                        <h3 style="font-family: 微软雅黑;font-size: 15px; text-align: left;">用户名<label style="color: red">* </label></h3>
                        <input
                                type="text"
                                v-model="name"
                                placeholder="请输入用户名"
                                class="input-text"
                                id="account"
                        />
                    </div>
                    <div class="input">
                        <h3 style="font-family: 微软雅黑;font-size: 15px; text-align: left;">密码<label style="color: red">* </label></h3>
                        <input
                                type="password"
                                v-model="password"
                                placeholder="请输入密码"
                                class="input-text"
                                id="password"
                        />
                    </div>
                    <div class="input">
                        <h3 style="font-family: 微软雅黑;font-size: 15px; text-align: left;">验证码<label style="color: red">* </label></h3>
                        <input
                                type="text"
                                v-model="trycode"
                                placeholder="请输入验证码"
                                class="input-text-trycode"
                                id="tryCode"
                        />
                        <img alt="验证码" onclick="this.src='/defaultKaptcha?d='+new Date()*1" src="/defaultKaptcha" id="img"/>
                    </div>
                    <div class="input">
                        <span><a href="/getPassword">忘记密码了？</a></span>
                    </div>
                </div>
                <div class="text-center">
                    <input
                            type="button"
                            value="提交"
                            class="tijiao"
                            id="btn-login"
                    />
                </div>
            </form>
        </div>
    </div>
    <div class="reg">
        <div class="reg_1">
            <h2>没有账号？</h2>
            <p>立即注册加入我们吧</p>
            <a href="/register">
                <button type="primary" class="sig">注册</button>
            </a>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        toastr.options = {
            "closeButton": true,// 是否显示关闭按钮
            "positionClass": "toast-center-center",// 弹出窗的位置
            "showDuration": "1000",// 显示的动画时间
            "hideDuration": "1000",// 消失的动画时间
            "timeOut": "1500",// 弹窗展现时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut", //消失时的动画方式
            "allowHtml":true,// 允许弹窗内容包含 HTML 语言
        };

        $("#btn-login").click(function () {
            if ($("#account").val() === "" || $("#password").val() === "" || $("#tryCode").val() === "") {
                toastr.warning('请填写相关信息');
            } else {
                $.ajax({
                    url: "/user/login",
                    type: "POST",
                    data: {
                        account: $("#account").val(),
                        password: $("#password").val(),
                        tryCode : $("#tryCode").val()
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.state === 200) {
                            $("#account").val("");
                            $("#password").val("");
                            $("#tryCode").val("");
                            window.sessionStorage.setItem("userName", data.data[0]);
                            window.sessionStorage.setItem("href", data.data[1]);
                            window.sessionStorage.setItem("roleId", data.data[2]);
                            window.sessionStorage.setItem("roleName", data.data[3]);
                            window.sessionStorage.setItem("userId", data.data[4]);
                            window.sessionStorage.setItem("portAddress", data.data[5]);
                            location.href = "/index";
                        } else {
                            toastr.error(data.data[0]);
                            $("#img").css("src","/defaultKaptcha?d=" + new Date()*1);
                            $("#tryCode").val("");
                        }
                    }
                })
            }
        })

        document.onkeydown = function(event) {
            if((event.keyCode || event.which) == 13) {
                if ($("#account").val() === "" || $("#password").val() === "" || $("#tryCode").val() === "") {
                    toastr.warning('请填写相关信息');
                } else {
                    $.ajax({
                        url: "/user/login",
                        type: "POST",
                        data: {
                            account: $("#account").val(),
                            password: $("#password").val(),
                            tryCode : $("#tryCode").val()
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.state === 200) {
                                $("#account").val("");
                                $("#password").val("");
                                $("#tryCode").val("");
                                window.sessionStorage.setItem("userName", data.data[0]);
                                window.sessionStorage.setItem("href", data.data[1]);
                                window.sessionStorage.setItem("roleId", data.data[2]);
                                window.sessionStorage.setItem("roleName", data.data[3]);
                                window.sessionStorage.setItem("userId", data.data[4]);
                                window.sessionStorage.setItem("portAddress", data.data[5]);
                                location.href = "/index";
                            } else {
                                toastr.error(data.data[0]);
                                $("#img").css("src","/defaultKaptcha?d=" + new Date()*1);
                                $("#tryCode").val("");
                            }
                        }
                    })
                }
            }
        }
    })
</script>
</body>
</html>
